<template>
  <div class="header">
    <div class="header2">组卷</div>
  </div>
      <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
        <el-form-item label="科目分类" prop="courseName"  required>
            <el-select v-model="ruleForm.courseName">
                <el-option
                 v-for="item in courseNames"
                 :key="item"
                 :label="item"
                 :value="item"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="考试名称" prop="name" required>
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="考试时长" prop="duration" required>
            <el-input v-model="ruleForm.duration"></el-input>
        </el-form-item>
        <el-form-item label="合格分数线"  prop="passingPoint" required>
           <!--  <el-input v-model="ruleForm.passingPoint"></el-input> -->
            <el-select v-model="ruleForm.passingPoint" placeholder="请选择百分比">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
        </el-form-item>

        <el-form-item label="备注" class="exam-remark" prop="remark" >
            <el-input type="textarea" :rows="4" v-model="ruleForm.remark"></el-input>
        </el-form-item><br/>
        <el-button type="primary"  plain @click="submit(ruleFormRef)">
          开始组卷
        </el-button>
      </el-form>
      
  </template>
  
  <script setup lang="ts">
import {ref, reactive,onMounted} from 'vue';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { interceptor } from '@/utils/interceptor';

  const courseNames = ref([])
  const router = useRouter();

 interface RuleForm{
  courseName:string
  duration:string
  passingPoint:string
  name:string
  remark:string
 }

 const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    courseName:'',
    duration:'',
    passingPoint:'',
    name:'',
    remark:'',
  })

  onMounted(()=>{
    getCourseName()
  })


  //查询教授的课程
  const getCourseName = ()=>{
    const httpInstance = interceptor()

    httpInstance.get("/teacher/course").then((res)=>{
        // 确保 res.data 是一个数组，并且只包含字符串
        if (Array.isArray(res.data.data)) {
            courseNames.value = res.data.data;
        } else {
            console.error("获得课程名称失败：返回的数据格式不正确");
        }
    }).catch(error =>{
        console.error("获得课程名称失败：",error);
    })
  }

  //校验
  const rules = reactive<FormRules<RuleForm>>({
    courseName: [
    {
        required: true,
        message: '请选择科目分类',
        trigger: 'change',
      },
    ],
    /* courseName:[], */
    duration: [
    {
        required: true,
        message: '请设置考试时长',
        trigger: 'blur',
      },
    ],
    passingPoint: [
    {
        required: true,
        message: '请设置百分比',
        trigger: 'change',
      },
    ],
    name: [
    {
        required: true,
        message: '请输入组卷名',
        trigger: 'blur',
      },
    ],
    remark: [],
  })

  //处理提交验证逻辑
  const submit = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
      if (valid) {

        // 在这里存储当前表单数据，以便在题库页面使用
      localStorage.setItem('currentExamForm', JSON.stringify(ruleForm));
      console.log("ruleForm1111:",ruleForm)
      
      // 导航到题库页面
      router.push({ name: 'selectQuestion'});
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  const options = Array.from({ length: 100 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  
  </script>
  
  <style scoped>

 .header {
    display: flex;
    align-items: center;
    padding: 5px;
    border-left: 2px solid #409EFF;
  }

  .header2 {
    margin-left: 5px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }
    .el-form{
        width:100%;
        height: 80%;
        margin:80px 30% 0 25%;
        overflow: hidden;
    }

    .el-button{
      display: flex;
      margin: 0 30% 0 50%; 
    }

/*   .el-form-item {
    font-size:50px;
    color: #0056b3;
  } */

  ::v-deep .el-form-item__label{
    font-size:20px;

  }
 
  </style>